<template>
  <div class="login-page">
    <div class="login-container">
      <!-- Logo and Title -->
      <div class="header">
        <div class="logo">
          <img src="/vite.svg" alt="Social Dojo" class="logo-image" />
        </div>
        <h1 class="title">Social Dojo</h1>
        <p class="subtitle">Master Your Social Skills</p>
      </div>

      <!-- Login Form -->
      <van-form @submit="handleLogin" class="login-form">
        <div class="form-fields">
          <!-- Email Field -->
          <div class="field-group">
            <label class="field-label">Email</label>
            <van-field v-model="loginForm.email" name="email" placeholder="jie473628@gmail.com" :rules="[
              { required: true, message: 'Email is required' },
              { validator: validateEmail, message: 'Please enter a valid email' }
            ]" clearable class="custom-field" />
          </div>

          <!-- Password Field -->
          <div class="field-group">
            <label class="field-label">Password</label>
            <van-field v-model="loginForm.password" type="password" name="password"
              placeholder="Please enter your password" :rules="[{ required: true, message: 'Password is required' }]"
              clearable class="custom-field" />
          </div>
        </div>

        <!-- Remember Me and Forgot Password -->
        <div class="form-options">
          <van-checkbox v-model="loginForm.rememberMe">
            Remember me
          </van-checkbox>
          <router-link to="/auth/forgot-password" class="forgot-link">
            Forgot password?
          </router-link>
        </div>

        <!-- Login Button -->
        <div class="form-actions">
          <van-button round block type="primary" native-type="submit" :loading="loading" class="login-btn">
            Sign In
          </van-button>
          <!-- 临时测试按钮 -->
          <van-button round block type="default" @click="testLogin" :loading="testLoading" style="margin-top: 10px;">
            Test Login (test@example.com)
          </van-button>
        </div>
      </van-form>

      <!-- Register Link -->
      <div class="register-section">
        <div class="register-text">Don't have an account?</div>
        <router-link to="/auth/register" class="register-link">
          <van-button type="default" block round class="register-btn">
            Create Account
          </van-button>
        </router-link>
      </div>




    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { useUserStore } from '@/stores/user'
import { validateEmail } from '@/utils/validate'
import type { LoginCredentials } from '@/types/user'

const router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const testLoading = ref(false)

const loginForm = reactive<LoginCredentials>({
  email: '',
  password: '',
  rememberMe: false
})

const handleLogin = async () => {
  try {
    loading.value = true
    await userStore.login(loginForm)

    showToast({
      type: 'success',
      message: 'Login successful'
    })

    // Redirect to home page or intended page
    const redirect = router.currentRoute.value.query.redirect as string
    router.push(redirect || '/')

  } catch (error: any) {
    showToast({
      type: 'fail',
      message: error.message || 'Login failed'
    })
  } finally {
    loading.value = false
  }
}

// 测试登录方法
const testLogin = async () => {
  try {
    testLoading.value = true
    await userStore.login({
      email: 'test@example.com',
      password: 'password123'
    })

    showToast({
      type: 'success',
      message: 'Test login successful'
    })

    // 登录成功后跳转到首页
    router.push('/')
  } catch (error) {
    console.error('Test login failed:', error)
    showToast({
      type: 'fail',
      message: 'Test login failed'
    })
  } finally {
    testLoading.value = false
  }
}


</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-md;
}

.login-container {
  width: 100%;
  max-width: 400px;
  background: $white;
  border-radius: $border-radius-xl;
  padding: $spacing-xl;
  box-shadow: $box-shadow-heavy;
}

.header {
  text-align: center;
  margin-bottom: $spacing-xl;

  .logo {
    margin-bottom: $spacing-md;

    .logo-image {
      width: 64px;
      height: 64px;
    }
  }

  .title {
    font-size: $font-size-2xl;
    font-weight: $font-weight-bold;
    color: $text-color;
    margin-bottom: $spacing-xs;
  }

  .subtitle {
    font-size: $font-size-md;
    color: $text-color-3;
  }
}

.login-form {
  margin-bottom: $spacing-xl;
}

.form-fields {
  margin-bottom: $spacing-lg;

  .field-group {
    margin-bottom: $spacing-xl;

    .field-label {
      display: block;
      font-size: $font-size-lg;
      font-weight: $font-weight-bold;
      color: $text-color;
      margin-bottom: 8px;
    }

    .custom-field {
      :deep(.van-cell) {
        height: 46px;
        padding: 0 $spacing-md;
        background: $white;
        border: 2px solid $border-color;
        border-radius: $border-radius-md;
        box-shadow: none;
        display: flex;
        align-items: center;

        &:focus-within {
          border-color: $danger-color;
        }
      }

      :deep(.van-field__control) {
        height: 100%;
        font-size: $font-size-md;
        color: $text-color;
        line-height: 1;

        &::placeholder {
          color: $text-color-3;
        }
      }

      :deep(.van-field__label) {
        display: none;
      }

      :deep(.van-field__left-icon) {
        display: none;
      }

      :deep(.van-field__clear) {
        color: $text-color-3;
      }
    }

    &:last-child .custom-field :deep(.van-cell:focus-within) {
      border-color: $danger-color;
    }
  }
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: $spacing-lg 0;
  padding: 0 $spacing-xs;

  .forgot-link {
    color: $primary-color;
    text-decoration: none;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;

    &:hover {
      text-decoration: underline;
    }
  }
}

.form-actions {
  margin: $spacing-xl 0;

  .login-btn {
    height: 52px;
    font-size: $font-size-lg;
    font-weight: $font-weight-medium;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: $box-shadow-light;

    &:active {
      transform: translateY(1px);
    }
  }
}

.register-section {
  text-align: center;
  margin-top: $spacing-xl;
  padding-top: $spacing-lg;
  border-top: 1px solid $border-color;

  .register-text {
    font-size: $font-size-sm;
    color: $text-color-3;
    margin-bottom: $spacing-md;
  }

  .register-link {
    text-decoration: none;

    .register-btn {
      height: 48px;
      font-size: $font-size-md;
      font-weight: $font-weight-medium;
      color: $primary-color;
      border: 1px solid $primary-color;
      background: transparent;

      &:hover {
        background: $primary-color;
        color: $white;
      }

      &:active {
        transform: translateY(1px);
      }
    }
  }
}
</style>